<template>
  <div class="home">
	<navBar /> 
    <div class="flex container">
	  <div>
		  <div style="position: relative;" class="newAssade">
			  <el-aside style="width: 200px;">
				  <el-menu  :default-active="currentMenu" class="el-menu-vertical-demo" >
					<div v-for="(el,i) in menuList" :key="i">
						<el-submenu :index="++i+''" v-if="el.children.length" >
						  <template slot="title">
						    <i class="iconfont" :class="el.icon"></i>
						    <span slot="title">{{el.title}}</span>
						  </template>
						  <el-menu-item @click="goPath(item)" :index="item.url"  v-for="(item,ind) in el.children">{{item.title}}</el-menu-item>
						</el-submenu>
						<el-menu-item @click="goPath(el)" :index="el.url"  v-if="!el.children.length">
						  <i class="iconfont" :class="el.icon"></i>
						  <span slot="title">{{el.title}}</span>
						</el-menu-item>
					</div>
				  </el-menu>
			  </el-aside>
			 <!-- <div class="asideicon">
				  <i class="el-icon-s-fold icon" v-if="isCollapse" @click="isCollapse=!isCollapse"></i>
				  <i class="el-icon-s-unfold icon" v-if="!isCollapse" @click="isCollapse=!isCollapse"></i>
			  </div> -->
		  </div>
	  </div>
	
		  <div class="main">
			
			  <div class="container">
				 <div >
					 <tagView :currentPath="currentMenu" :tags="tags" @toChildPath="toChildPath"></tagView>
				 </div>
				
				  <div class="app-main">
					  <router-view/>	 
				  </div>
			  </div>
		  </div>
	   
    </div>
  </div>
</template>


<script>
import tagView from './child/tagView.vue'
import menuList from './child/menu.js'
import navBar from './child/Navbar.vue'
export default {
  data() {
    return {
		currentMenu:"",
		tags:[],
		menuList:[],
		isCollapse:true
    };
  },
  components:{
	  tagView,navBar
	  // navBar,tagView
  },
  computed:{
	 
  },
  created() {
	this.menuList = menuList.menuList
  },
  watch: {
     $route(to, from) {
		 this.currentMenu = to.path;
     }
  },
  mounted() {
	  this.getUrl()
  },
  methods: {
	  getUrl(){
	      let currentUrl = window.location.href;
	      this.currentMenu = currentUrl.split('#')[1];
	  },
	  goPath(item){
		 let bool =this.tags.some((el,i)=>{
		 	 return el.title == item.title
		 })
		 if(!bool) this.tags.push(item)
		  this.$router.push({path:item.url})
	  },
	  toChildPath(item){
		  let bool =this.tags.some((el,i)=>{
		  	 return el.title == item.title
		  })
		  if(!bool) this.tags.push(item)
		   this.$router.push({path:item.url})
	  },
  }
};
</script>
<style lang="scss">
	 .el-aside{
		  height: calc(100vh - 60px);
	 } 
	.app-main{
		position: relative;
	}
	.asideicon{
		position: absolute;bottom: -30px;left: 90px;
		.icon{
			  font-size: 20px;
			  margin-top: -2px;
			  margin-right: 20px;
			  cursor: pointer;
		  }
	}
	
	.fade-enter {
	 animation:mymove 3s linear;
	}
	.el-menu{
		border-right: none;
	}
	.newAssade::-webkit-scrollbar{
		width: 0.1px;
	}
	
	.main{
		   height: calc(100vh - 60px);
		   flex: 1;
		   background-color: rgb(245,245,245);
		   overflow-x: scroll;
		   overflow-y: scroll;
		   .container{
			   padding: 0px 20px;
		   }
		   
	   }
	

</style>
